Audio এবং Media প্লেব্যাক ম্যানেজমেন্ট

React Native-এ audio এবং media প্লেব্যাক ম্যানেজমেন্টের জন্য বিভিন্ন প্যাকেজ এবং API রয়েছে, যা আপনাকে অডিও এবং ভিডিও প্লেব্যাক সুষ্ঠুভাবে পরিচালনা করতে সাহায্য করে। এগুলি ব্যবহারের মাধ্যমে আপনি অডিও ফাইল প্লে, পজ, পজিশন ট্র্যাকিং, লুপিং, ভলিউম কন্ট্রোল, এবং অন্যান্য প্লেব্যাক কাস্টমাইজেশন করতে পারবেন।

এখানে দুটি জনপ্রিয় প্যাকেজের মাধ্যমে অডিও এবং মিডিয়া প্লেব্যাক পরিচালনা করা হবে:

1. react-native-sound - অডিও প্লেব্যাক ম্যানেজমেন্টের জন্য একটি সহজ প্যাকেজ।
2. react-native-video - ভিডিও প্লেব্যাক এবং কাস্টমাইজেশন জন্য একটি শক্তিশালী লাইব্রেরি।

১. react-native-sound (অডিও প্লেব্যাক)

react-native-sound প্যাকেজটি React Native অ্যাপে অডিও ফাইল প্লে করার জন্য ব্যবহৃত হয়। এটি বিভিন্ন অডিও ফরম্যাট যেমন MP3, WAV ইত্যাদি প্লে করতে সহায়ক।

ইনস্টলেশন

প্রথমে আপনাকে react-native-sound প্যাকেজটি ইনস্টল করতে হবে।

npm install react-native-sound

অডিও প্লেব্যাক উদাহরণ

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import Sound from 'react-native-sound';

// অডিও ফাইলটি লোড করতে হবে
Sound.setCategory('Playback');

const AudioPlayer = () => {
  const [sound, setSound] = useState(null);

  const playSound = () => {
    const whoosh = new Sound('audio_file.mp3', Sound.MAIN_BUNDLE, (error) => {
      if (error) {
        console.log('Error loading sound', error);
        return;
      }
      // অডিও প্লে
      whoosh.play((success) => {
        if (success) {
          console.log('Finished playing!');
        } else {
          console.log('Playback failed');
        }
      });
    });

    setSound(whoosh);
  };

  const stopSound = () => {
    if (sound) {
      sound.stop(() => {
        console.log('Stopped sound');
      });
    }
  };

  return (
    <View>
      <Button title="Play Sound" onPress={playSound} />
      <Button title="Stop Sound" onPress={stopSound} />
    </View>
  );
};

export default AudioPlayer;

ব্যাখ্যা:

• Sound ক্লাসটি অডিও প্লেব্যাক পরিচালনা করে।
• playSound ফাংশনটি অডিও প্লে করার জন্য ব্যবহার করা হয়।
• stopSound ফাংশনটি অডিও থামানোর জন্য ব্যবহৃত হয়।

২. react-native-video (ভিডিও প্লেব্যাক)

react-native-video লাইব্রেরিটি React Native অ্যাপে ভিডিও প্লেব্যাক ম্যানেজ করতে ব্যবহৃত হয়। এটি ভিডিও প্লে, পজ, পজিশন ট্র্যাকিং, ভলিউম কন্ট্রোল, ইত্যাদি সহ বিভিন্ন কাস্টমাইজেশন সহ ভিডিও প্লেব্যাক পরিচালনা করে।

ইনস্টলেশন

npm install react-native-video

ভিডিও প্লেব্যাক উদাহরণ

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Video from 'react-native-video';

const VideoPlayer = () => {
  return (
    <View style={styles.container}>
      <Video
        source={{ uri: 'https://www.example.com/video.mp4' }} // ভিডিও সোর্স
        ref={(ref) => {
          this.player = ref;
        }}
        onBuffer={() => console.log('buffering')}
        onError={(error) => console.log('video error', error)}
        controls={true} // ভিডিও কন্ট্রোলস দেখাবে
        style={styles.backgroundVideo}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  backgroundVideo: {
    width: '100%',
    height: 200,
  },
});

export default VideoPlayer;

ব্যাখ্যা:

• source প্রপটি ভিডিও সোর্স (URL বা লোকাল ফাইল) নির্দেশ করে।
• controls প্রপটি ভিডিও কন্ট্রোল যেমন প্লে/পজ/ভলিউম কন্ট্রোল দেখাবে।
• onBuffer এবং onError কলব্যাক ব্যবহার করে ভিডিও প্লেব্যাকের স্টেট ট্র্যাক করতে পারেন।

অডিও এবং ভিডিও প্লেব্যাক কাস্টমাইজেশন

অডিও কাস্টমাইজেশন (react-native-sound)

1. ভলিউম কন্ট্রোল:
   অডিও ফাইলটির ভলিউম কাস্টমাইজ করতে পারেন:

   whoosh.setVolume(0.5); // ভলিউম 0 থেকে 1 এর মধ্যে থাকবে

2. এলপসিং অডিও:
   অডিও বারবার প্লে করতে setNumberOfLoops ব্যবহার করতে পারেন:

   whoosh.setNumberOfLoops(-1); // এটা অডিওকে ইনফিনিট লুপে রাখবে

ভিডিও কাস্টমাইজেশন (react-native-video)

1. অটো-প্লে:
   ভিডিও অটো-প্লে করার জন্য:

   <Video
     source={{ uri: 'https://www.example.com/video.mp4' }}
     autoPlay={true}
     style={styles.backgroundVideo}
   />

2. ভলিউম কন্ট্রোল:
   ভিডিওর ভলিউম কন্ট্রোল করতে:

   <Video
     source={{ uri: 'https://www.example.com/video.mp4' }}
     volume={0.5} // ভলিউম 0 থেকে 1 এর মধ্যে
     style={styles.backgroundVideo}
   />

3. মিউট করা:
   ভিডিও মিউট করতে:

   <Video
     source={{ uri: 'https://www.example.com/video.mp4' }}
     muted={true} // ভিডিও মিউট হবে
     style={styles.backgroundVideo}
   />

সারাংশ

React Native এ অডিও এবং ভিডিও প্লেব্যাক পরিচালনা করার জন্য react-native-sound এবং react-native-video দুটি জনপ্রিয় লাইব্রেরি ব্যবহৃত হয়। এগুলি আপনাকে প্লেব্যাক স্টার্ট, পজ, ভলিউম কন্ট্রোল, কাস্টমাইজেশন, এবং অন্যান্য ফিচারের সুবিধা প্রদান করে।

• react-native-sound অডিও প্লেব্যাকের জন্য ব্যবহার করা হয়।
• react-native-video ভিডিও প্লেব্যাকের জন্য ব্যবহৃত হয়, যেখানে ভিডিও ফাইলগুলি প্লে, পজ, এবং কাস্টমাইজ করা যায়।

এগুলো ব্যবহার করে আপনি অডিও এবং ভিডিও ফাইলগুলি React Native অ্যাপে আরও উন্নতভাবে ব্যবহৃত করতে পারবেন।